<!-- 打印弹框 -->
<template>
  <Teleport to="body">
    <div class="print">
      <table class="table" align="center" :id="id" cellpadding="0" cellspacing="0">
        <caption>
          {{
            title
          }}
        </caption>
        <tr>
          <th v-for="item in ths" :key="item.prop">{{ item.label }}</th>
        </tr>
        <tr v-for="item in list" :key="item.id">
          <td v-for="obj in ths">{{ item[obj.prop] }}</td>
        </tr>
      </table>
    </div>
  </Teleport>
</template>

<script setup>
import { computed } from "vue";
import { printTitles, printColumns } from "./printConfig";
const props = defineProps({
  type: String,
  id: String,
  tableData: Array
});
const visible = true;
const title = computed(() => {
  return printTitles[props.type];
});

const ths = computed(() => {
  return printColumns[props.type];
});

const list = computed(() => {
  return props.tableData.map((item) => {
    const [order_date] = (item.order_date || "").split(" ");
    const [use_time] = (item.use_time || "").split(" ");
    return { ...item, order_date, use_time };
  });
});
</script>
<style lang="scss"></style>
